<template>
    <div class="baofutong_container">
        <div class="tabs_card">
            <el-tabs v-model="activeName">
                <el-tab-pane v-for="{ name, label } in detailTabs" :key="name" :label="label" :name="name" />
            </el-tabs>
        </div>
        <component :is="componentId"></component>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, defineAsyncComponent, computed } from 'vue';
import { setLayout, resetLayout } from '@/hooks/layout';

let activeName = ref('list');
const detailTabs = [
    { name: 'list', label: '商户列表' },
    { name: 'base', label: '基础设置' }
];
const componentId = computed(() => {
    const defineAsyncComponents = {
        list: defineAsyncComponent(() => import('./list.vue')),
        base: defineAsyncComponent(() => import('./base.vue'))
    };
    return defineAsyncComponents[activeName.value];
});

onMounted(() => {
    setLayout('custom-delivery-layout');
});
onUnmounted(() => {
    // tabActiveName.value = 'fast';
    resetLayout('custom-delivery-layout');
});
</script>

<style lang="scss">
.custom-delivery-layout {
    height: 100%;
    padding: 0 !important;
    background-color: unset !important;
    .order-delivery {
        height: 100%;
    }
}
</style>
<style lang="scss" src="./index.scss" scoped></style>
